<template>
	<view class="">
		 <u-sticky bgColor="#fff">
		   <u-tabs lineColor='#1cb8a7' :scrollable='false' :list="list1" @click="clickTab"></u-tabs>
		  </u-sticky>
		<view class="content">
			<view class="card" v-for="(it,i) in listTable" :key="i" @click="goDetail(it)">
				<view class="top">
					<view class="classify">
						<text class="iconfont icon-baoxiu-xuanzhong" style="margin-right: 15rpx;color: rgba(252,91,35,0.9);"></text>故障报修
					</view>
				</view>
				<view class="center">
					<view class="">
						受理人:<text >{{it.builderName}}</text>
					</view>
					
					<view class="">
						报修时间:<text>{{it.createTime}}</text>
					</view>
				</view>
				<view class="bottom">
					<view class="">
						<image style="vertical-align: middle" src="@/static/avatar.png" alt="" />{{it.createUserName}}
						<text style="color: #8a8b8c;float: right;margin-top: 6rpx;">{{it.updateTime}}</text>
					</view>
					
						
					
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-tabbar :value="tabbarIndex"  :fixed="true" :border="true" activeColor="#1cb8a7">
			<u-tabbar-item text="申请" icon="edit-pen-fill" @click="clickTabbar"></u-tabbar-item>
			<u-tabbar-item text="列表" icon="file-text-fill" @click="clickTabbar"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
import {
		listMyCreateTable,listTable
	} from '@/api/FaultRepair.js';	
export default {
	data() {
		return {
			tabbarIndex: 1,
			listTable:[{
				type:'办公用品',
				startTime:'2022-03-16 13:10:37',
				endTime:'2022-03-16 13:10:37',
				creatUser:'刘国强',
				createTime:'2022-03-16 13:10:37'
			}],
			list1: [
				{
					name: '我申请的'
				},
				{
					name: '全部'
				},
			],
			status: 'loadmore',
			params:{
				pageNum: 1,
				pageSize: 10,
			},
			pageMore:true
		};
	},
	onReachBottom: function() {
		//避免多次触发
		// if (this.loadingType == 1 || this.loadingType == 3||this.loadingType == 2) {
		// 	return;
		// }
		this.loadMoreFunc();
	},
	onLoad(){
		this.initParams()
		this.getListMyCreateTable()
	},
	methods: {
		loadMoreFunc: function() {
			if (!this.pageMore) {
				// this.loadingType = 2;
				return;
			}
			this.getData(this.params)
		},
		initParams(){
			this.listTable=[];
			// this.loadingType = 4;
			this.params.pageNum = 1;
			this.pageMore = true;
		},
		pathRes(data){
			uni.showLoading({
				title: '正在加载...',
				mask: true
			});
			if (data.code == 0) {
				uni.hideLoading();
				if (data.data.list.length == 0) {
					// this.loadingType = 3;
					this.status='nomore'
					return;
				}
				if (data.data.isLastPage) {
					this.pageMore = false;
					this.listTable = this.listTable.concat(data.data.list);
					// this.loadingType = 2;
					this.status='nomore'
				} else {
					if (data.data.isFirstPage) {
						this.listTable = data.data.list;
					} else {
						
						this.listTable = this.listTable.concat(data.data.list);
						console.log('不是第一页',this.listTable)
					}
					this.params.pageNum++;
					// this.loadingType = 0;
				}
				console.log('this.listTable',this.listTable)
					
				console.log('显示数据',this.listTable)
			}else{
				this.$api.showTip(res.data.msg);
			}
		},
		// 我申请的
		async getListMyCreateTable(){
			const {data}=await listMyCreateTable(this.params)
			if(data.code==0){
				this.pathRes(data)
			}
			console.log('返回数据',data)
		},
		// 全部
		async getListTable(){
			const {data}=await listTable(this.params)
			if(data.code==0){
				this.pathRes(data)
			}
			console.log('返回数据',data)
		},
		clickTab(item) {
			this.initParams()
			if(item.index==0){
				// 我申请的
				this.getListMyCreateTable()
			}else{
				// 全部
				this.getListTable()
			}
			console.log('item', item);
		},
		goDetail(it){
			uni.navigateTo({
				url:'detail?id='+it.id
			})
		},
		clickTabbar(e) {
			this.tabbarIndex = e;
			console.log('eeeee', e);
			if (this.tabbarIndex == 0) {
				uni.redirectTo({
					url: '/pages/subPack/repair/apply'
				});
			} else if (this.tabbarIndex == 1) {
				uni.redirectTo({
					url: '/pages/subPack/repair/list'
				});
			}
		},
		click() {}
	}
};
</script>

<style lang="scss" scoped>
.content{
	padding: 20rpx;
	width: 100%;
	height: 100%;
	.card{
		width: 100%;
		background-color: #fff;
		border-radius:14rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		.top{
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.classify{
				font-weight: bold;
			}
		}
		.center{
			view{
				margin-bottom: 10rpx;
			}
			text{
				color: #8a8b8c;
				margin-left: 10rpx;
			}
		}
		.bottom{
			margin-top: 30rpx;
			width: 100%;
			font-size: 28rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
// 底部
/deep/.u-tabbar--fixed {
	border-top: 1px solid #dadbde;
}
/deep/.u-icon__icon {
	// font-size: 48rpx!important
}
/deep/.u-tabbar-item__text {
	font-size: 26rpx;
}
</style>
